<template>
	<div :class="className">
		<dv-scroll-board :config="config" style="width: 100%; height: 96%;" />
	</div>
</template>

<script>
export default {
    props: {
        className: { type: String, default: '' },
        isMock: { type: Boolean, default: false },
    },
    data() {
        return {
            config: {
                header: ['SN', '状态', '时间'],
                data: [],
                rowNum: 8, // 表格行数
                headerHeight: 28,
                headerBGC: '#0f1325', // 表头
                oddRowBGC: '#0f1325', // 奇数行
                evenRowBGC: '#171c33', // 偶数行
                index: false,
                columnWidth: [280, 60],
                align: ['left', 'center']
            },
            dataTimer: null,
        };
    },
    mounted() {
        if (this.isMock) {
            this.mock();
            return;
        }

        this.getData();
        this.setTimer();
    },
    beforeUnmount() {
        if (this.dataTimer) {
            clearInterval(this.dataTimer);
            this.dataTimer = null;
        }
    },
    methods: {
        setTimer() {
            this.dataTimer = setInterval(async () => {
                await this.getData();
            }, 31000); // 31s
        },
        mock() {
            let i = 0;
            this.dataTimer = setInterval(() => {
                const data = this.config.data;
                if (data.length < 12) {
                    data.push([
                        `SN-1234567890ABCDEFGHIJ${i++}`,
                        'OK',
                        this.$TOOL.dateFormat(new Date(), 'MM/dd HH:mm:ss')
                    ]);
                }

                // if (data.length === 12) {
                //     data.shift();
                // }
            }, 1000);
        },
        async getData() {
            try {
                const resp = await this.$API.reportproductivity.rt.get();
                if (resp.code === 200) {
                    const data = resp.data;
                    if (!data?.length) {
                        return;
                    }

                    // 去重处理
                    data.forEach(e => {
                        if (!this.config.data.some(arr => arr[0] === e.sn)) {
                            this.config.data.push([
                                e.sn,
                                e.status,
                                this.$TOOL.dateFormat(new Date(e.outboundTime), 'MM/dd HH:mm:ss'),
                            ]);
                        }
                    });

                    const count = this.config.data.length;
                    if (count > 15) {
                        this.config.data.slice(0, count - 15); // 移除前几个元素
                    }
                }
            } catch {
                console.warn("[productivity-rt] 无响应数据");
            }
        }
    }
}
</script>

<style lang="scss" scoped>
/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
    background-color: transparent;
}

:deep(el-table td.el-table__cell),
:deep(.el-table th.el-table__cell.is-leaf) {
    border-bottom: 0;
}

:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
    background-color: transparent !important;
}

:deep(.el-table td.el-table__cell div.cell) {
    background-color: transparent !important;
}

:deep(.el-table) {
    background-color: transparent !important;
}

:deep(.el-table__row) {
    background-color: transparent;
}

/* 去除底部白线 */
.el-table::before {
    background-color: transparent;
}
</style>
